<template>
    <div>
        <el-carousel @click.native="go" style="margin-top: 1px;cursor: pointer" :interval="3500" arrow="always"
                     height="409px">
            <el-carousel-item style="height: 409px;" v-for="(item, index) in banner" :key="index">
                <el-image style=" height: 100%;width: 100%;" :src="item"></el-image>
            </el-carousel-item>
        </el-carousel>

        <el-row type="flex" justify="center" class="shownum" style="margin-top: 20px" :gutter="20">
            <el-col :span="3" style="cursor: pointer" @click.native="go_volunteer">
                <div>
                    <img src="http://jmva.jiangmen.cn/images/img_002.png"/>
                    <div class="num">326524</div>
                    <div class="title">志愿者</div>
                </div>
            </el-col>
            <el-col :span="3" style="cursor: pointer" @click.native="go_activity">
                <div>
                    <img src="http://jmva.jiangmen.cn/images/img_003.png"/>
                    <div class="num">47555</div>
                    <div class="title">志愿活动</div>
                </div>
            </el-col>
            <el-col :span="3" style="cursor: pointer" @click.native="go_time">
                <div>
                    <img src="http://jmva.jiangmen.cn/images/img_005.png"/>
                    <div class="num">236632</div>
                    <div class="title">志愿服务时长</div>
                </div>
            </el-col>
            <el-col :span="3" style="cursor: pointer" @click.native="go_time">
                <div>
                    <img src="http://jmva.jiangmen.cn/images/img_004.png"/>
                    <div class="num">72343</div>
                    <div class="title">志愿社区</div>
                </div>
            </el-col>
            <el-col :span="3" style="cursor: pointer" @click.native="$router.push('DataEcharts')">
                <div>
                    <img src="http://jmva.jiangmen.cn/images/img_006.png"/>
                    <div class="num">23555</div>
                    <div class="title">更多数据统计</div>
                </div>
            </el-col>
        </el-row>
        <div style="margin-top: 40px;margin-bottom: 40px">
            <el-divider><span style="font-size: 25px;">热门活动</span></el-divider>
        </div>

        <el-carousel :interval="3000" type="card" height="350px" style="width: 100%;margin-top: 10px">
            <el-carousel-item v-for="(item,key) in hotactivity" :key="key">
                <div style="display: flex;justify-content: center;align-items: center">
                    <el-card style="width: 300px" shadow="never" @click.native="goto_rmhd(item.id)">
                        <el-image :src="item.img"></el-image>
                        <div style="font-size: 18px;color: #535353;font-weight: bold;margin-top:10px;">
                            {{ item.title}}
                        </div>
                        <div style="margin-top:30px;display: flex;justify-content: center;align-items: center;width: 100%">
                            <div style="margin-left: 10px;margin-right: 10px">
                                <div style="color: #00afef;font-size: 26px;"> {{ item.zmrs}}</div>
                                <div style="margin-top: 5px">招募人数</div>
                            </div>
                            <div style="margin-left: 10px;margin-right: 10px">
                                <div style="color: #fcd004;font-size: 26px;">{{ item.bmrs}}</div>
                                <div style="margin-top: 5px">报名人数</div>
                            </div>
                            <div style="margin-left: 10px;margin-right: 10px">
                                <div style="color: #7a7a7a;font-size: 26px;">{{ item.day}}</div>
                                <div style="margin-top: 5px">剩余天数</div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div style="margin-top: 40px;margin-bottom: 40px">
            <el-divider><span style="font-size: 25px;">志愿社区</span></el-divider>
        </div>
        <el-row style="margin-top: 1px" :gutter="18">
            <el-col :offset="1" v-for="(index,key) in zysq" :key="key" :span="7">
                <!--  {{item.id}}-->
                <el-card id="item" shadow="never" style="margin-top: 30px;cursor: pointer"
                         @click.native="goto_zysq(index.id)">
                    <el-image style="width: 200px" :src="index.img" lazy></el-image>
                    <div style="margin-top:20px;">
                        <h4 style="color: #000;font-weight: 500;font-size: 18px">{{index.title}}</h4>
                        <span style="color: #4d4d4d">{{index.content}}</span>
                        <h4 style="color: #4d4d4d;font-weight: 500;font-size: 15px">创建时间：{{index.ctime}}</h4>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>


</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                banner: [
                    'http://jmva.jiangmen.cn/images/p1_1.png',
                    'http://jmva.jiangmen.cn/images/p4_1.png',
                    'http://jmva.jiangmen.cn/images/p8_1.png',
                    'http://jmva.jiangmen.cn/images/p2_1.png',
                    'http://jmva.jiangmen.cn/images/p3_1.jpg',
                    'http://jmva.jiangmen.cn/images/p7_1.jpg',
                    // '',
                ],
                hotactivity: [
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/16.jpg',
                        title: '给工地工人送温暖',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                    },
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/6.jpg',
                        title: '协助退休人员年审（招募社会义工）',
                        zmrs: 843,
                        bmrs: 10,
                        day: 10,
                    },
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/11.jpg',
                        title: '送钱给老人',
                        zmrs: 366,
                        bmrs: 10,
                        day: 10,
                    },
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/4.jpg',
                        title: '送钱给老人',
                        zmrs: 225,
                        bmrs: 10,
                        day: 10,
                    },
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/images/3.jpg',
                        title: '送钱给老人',
                        zmrs: 654,
                        bmrs: 10,
                        day: 10,
                    }
                ],
                zysq: [
                    {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20161121103214_988.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    }, {
                        id: 2,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20181212125558_894.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    }, {
                        id: 3,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20161121210634_323.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    }, {
                        id: 1,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20161121103214_988.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    }, {
                        id: 2,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20181212125558_894.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    }, {
                        id: 3,
                        img: 'http://jmva.jiangmen.cn/upload/attachment/206/20161121210634_323.jpg',
                        title: '五邑大学智能制造学部',
                        zmrs: 20,
                        bmrs: 10,
                        day: 10,
                        ctime: '1999年6月1日',
                        content: '为爱而生，给世界带来温暖，非常有爱的一个社区',
                    },
                ],
            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            go_volunteer() {
                this.$message.success("志愿者")
            },
            go_activity() {
                this.$message.success("志愿活动")
            },
            go_time() {
                this.$message.success("志愿服务时长")
            },
            go_tj() {
                this.$message.success("更多数据统计")
            },
            //热门活动点击事件
            goto_rmhd(b) {
                this.$router.push({
                    path: '/ActivityInfo',
                    query: {
                        id: b.id,
                    }
                })
            },
            //志愿社区的点击事件community
            goto_zysq(b) {
                this.$router.push({
                    path: '/Community',
                    query: {
                        id: b.id,
                    }
                })
            }
        },
        beforeDestroy() {

        },
        props: {},
        computed: {//计算属性

        },
    }
</script>
<style lang="less" scoped>
    .shownum {
        width: 100%;
        height: auto;
        background: url('http://jmva.jiangmen.cn/images/bg3.jpg') repeat-x;
        padding: 30px 0px 10px 0px;
    }

    .el-col {
        div {
            img {
                // width: 50px;
                //height: 70px;
            }

            .num {
                height: 40px;
                font-size: 37px;
                font-weight: 500;
                color: #333333;
                padding-top: 30px;
            }

            .title {
                height: 40px;
                line-height: 40px;
                font-size: 15px;
                color: #333333;
            }
        }

    }
</style>
